<template>
  <div class="create-center">
    <div class="create-center-content">
    <div class="Demand-tab-detail">
        <div class="detail-title-line">
          <span class="icon-status" :class="demandStatus(activeDemand)"></span>
          <div class="detail-title">需求详情</div>
        </div>
        <ul class="detail-content">
          <li class="detail-item">
            <p class="detail-item-title">ID</p>
            <p class="detail-item-value detail-item-value-number">{{ activeDemand.demandId && padNumber(activeDemand.demandId, 4) }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">状态</p>
            <p class="detail-item-value">{{ activeDemand.status }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">类型</p>
            <p class="detail-item-value">{{ activeDemand.type }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">周期</p>
            <p class="detail-item-value">{{ activeDemand.cycle }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">单次价格</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.price }}
              <!-- <span class="unit">CYN</span> -->
              <img class="unit-CNY" src="@/assets/images/mine/img／currency／CNY／grey@2x.png" alt />
  
            </p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">有效期</p>
            <p class="detail-item-value detail-item-value-number">
              <span>{{ activeDemand.start_time && format(activeDemand.start_time, "yy.MM.dd") }}</span>
              <span> - </span>
              <span class="end-time-long" v-if="activeDemand.end_time === '长期'">{{ activeDemand.end_time }}</span>
              <span v-else>{{ activeDemand.end_time && format(activeDemand.end_time, "yy.MM.dd") }}</span>
            </p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="handleOpenTask">
            <p class="detail-item-title">最近已交付</p>
            <p class="detail-item-value detail-item-value-number">{{ activeDemand.lastTime ? format(new Date(activeDemand.lastTime * 1000), "yy.MM.dd") : '--' }}</p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="gocontributton(1, activeDemand.delivered)">
            <p class="detail-item-title">已交付</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.delivered }}
              <span class="unit">篇稿件</span>
            </p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="gocontributton(2, activeDemand.unDown)">
            <p class="detail-item-title">待下载</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.unDown }}
              <span class="unit">篇稿件</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="Demand-task-create">
        <div class="task-list">
          <div class="task-title-line">
            <!-- <span
                    >您当前有<span class="task-num">00</span>个任务需要手动操作.</span
                  > -->
            <div class="task-search-box">
              <a-input v-model="taskFilterForm.searchText" style="width: 240px" @change="queryTaskListInfo(activeDemand.demandId)" :style="{width:'320px'}" placeholder="搜索关键词" allow-clear>
                <template #prefix>
                  <icon-search />
                </template>
              </a-input>
            </div>
            <div class="task-filter">
              <!-- 状态筛选器 -->
              <a-popover @popup-visible-change="handleChangeStatusFilterShow" v-if="taskFilterList.findIndex(dd => dd.isSelect) === -1 || filterIshow.status"  ref="filterStatuspickerPopRef" content-class="filter-popper-box"  :teleported="false" :show-arrow="false" placement="right-start" :width="248" trigger="click">
                <div class="icon-filter-normal">
                  <div class="tips-filter" v-if="taskFilterList[0].num > 0"></div>
                  <icon-filter />
                </div>
              <template #content>
               <div class="popper-content">
                <div class="popper-title">
                  <div class="lef">
                    <div class="title">筛选</div>
                    <p>此处可多选.</p>
                  </div>
                  <img @click="filterStatuspickerPopRef.handlePopupVisibleChange(false)" src="@/assets/images/mine/button／common／ok／normal@2x.png" alt="">
                </div>
                <div class="line"></div>
                <div class="filter-list">
                  <div class="filter-item" :class="{'filter-item-active': item.isSelect}" @click="item.isSelect = !item.isSelect" v-for="(item, index) in taskFilterList" :key="index">
                    <span class="filter-item-name">{{ item.title }}</span>
                    <span class="filter-item-num">{{ item.num }}个</span>
                  </div>
                </div>
               </div>
              </template>
            </a-popover>
            <div class="icon-selected icon-filter-normal" @click="() => {taskFilterList.forEach(dd => dd.isSelect = false);queryTaskListInfo(activeDemand.demandId)}" v-else>
              <div class="tips-filter" v-if="taskFilterList[0].num > 0"></div>
              <icon-filter />
            </div>

<!-- 日期筛选 -->
    <a-popover content-class="filter-popper-box" @show="filterIshow.time = true;" v-if="!taskFilterForm.timeFilter || filterIshow.time"  ref="filterTimepickerPopRef" @hide="() =>{filterIshow.time = false;queryTaskListInfo(activeDemand.demandId)}" :show-arrow="false" :teleported="false" placement="right-start" :width="284" trigger="click">
        <div class="icon-filter-normal">
          <icon-calendar />
        </div>
        <template #content>
      <div class="popper-content">
        <div class="popper-title">
          <div class="lef">
            <div class="title">筛选</div>
            <p v-if="activeDemand.cycle === '周交'">请选择预期交稿周期.</p>
            <p v-if="activeDemand.cycle === '日交'">请选择预期交稿日.</p>
          </div>
          <img @click="filterTimepickerPopRef.handlePopupVisibleChange(false)" src="@/assets/images/mine/button／common／ok／normal@2x.png" alt="">
        </div>
        <div class="line"></div>
        <div class="filter-timer">
          <a-date-picker :allow-clear="false" :disabled-input="true"
          v-if="activeDemand.cycle === '日交'"
      v-model:pickerValue="taskFilterForm.timeFilter"
      hide-trigger
      style="width: 268px;"
      @picker-value-change="handleChangeTimePicker"
    />
    <a-week-picker size="small" :allow-clear="false" :disabled-input="true"
    :day-start-of-week="1"
    v-if="activeDemand.cycle === '周交'"
      v-model:pickerValue="taskFilterForm.timeFilter"
      hide-trigger
      style="width: 268px;"
      @picker-value-change="handleChangeTimePicker"
    />
        </div>
        </div>
        </template>
    </a-popover>
    <div class="icon-selected icon-filter-normal" @click="() => {taskFilterForm.timeFilter = '';queryTaskListInfo(activeDemand.demandId)}" v-else>
      <icon-calendar />
            </div>
            </div>
          </div>
          <div class="create-button" :class="{
                    'active-task-item': !currentTask?.taskId,
                  }" @click="handleClickTask( null, true)">
            <icon-plus-circle />
            添加关键词
          </div>
          <ul ref="scrollContainer" class="task-list-ul scrollbar-class">
            <li v-for="item in activeDemand?.taskList || []" :key="item.taskId" class="task-item" :class="{
                      'active-task-item': currentTask?.taskId === item?.taskId,
                      'icon-status-done-grey-fill': singleDemandStatus(item) === 'icon-status-done'
                    }" @click="handleClickTask(item)">
              <img v-if="willDo.includes(item.status) && processList[0].includes(item.status)" class="status-img"
                src="@/assets/images/mine/img／mission／step／A／yellow@2x.png" alt="" />
              <img v-if="willDo.includes(item.status) && processList[1].includes(item.status)" class="status-img"
                src="@/assets/images/mine/img／mission／step／B／yellow@2x.png" alt="" />
              <img v-if="doing.includes(item.status) && processList[1].includes(item.status)" class="status-img"
                src="@/assets/images/mine/img／mission／step／B／blue@2x.png" alt="" />
              <img v-if="doing.includes(item.status) && processList[2].includes(item.status)" class="status-img"
                src="@/assets/images/mine/img／mission／step／C／blue@2x.png" alt="" />
              <img v-if="willDo.includes(item.status) && processList[3].includes(item.status)" class="status-img"
                src="@/assets/images/mine/img／mission／step／D／yellow@2x.png" alt="" />
              <img v-if="doing.includes(item.status) && processList[3].includes(item.status)" class="status-img"
                src="@/assets/images/mine/img／mission／step／D／blue@2x.png" alt="" />
              <img v-if="singleDemandStatus(item) === 'icon-status-doing' && processList[4].includes(item.status)"
                class="status-img" src="@/assets/images/mine/img／mission／step／E／blue@2x.png" alt="" />
              <img v-if="singleDemandStatus(item) === 'icon-status-done' && processList[4].includes(item.status)"
                class="status-img" src="@/assets/images/mine/img／mission／step／E／grey@2x.png" alt="" />
              <img v-if="item.status === '未补充已过期'"
              class="status-img" src="@/assets/images/mine/img／mission／step／A／grey@2x.png" alt="" />
              <img v-if="item.status === '已取消'"
              class="status-img" src="@/assets/images/mine/img／mission／step／F／grey@2x.png" alt="" />
  
              <div class="task-item-info">
                <span class="info-time">{{ format(item.estimatedTime,"yy.MM.dd") }}</span>
                <img class="info-status-img" v-if="item.status === '待补充'"
                  src="@/assets/images/mine/img／missionLabel／A／awaitFilling／yellow@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '关键词审核中'"
                  src="@/assets/images/mine/img／missionLabel／B／auditing／blue@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '待确认'"
                  src="@/assets/images/mine/img／missionLabel／D／awaitConfirm／yellow@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '稿件修改中'"
                  src="@/assets/images/mine/img／missionLabel／D／modifying／blue@2x.png" alt="">
                <img class="info-status-img"
                  v-if="item.status === '已完成' && singleDemandStatus(item) === 'icon-status-doing'"
                  src="@/assets/images/mine/img／missionLabel／E／done／blue@2x.png" alt="">
                <img class="info-status-img"
                  v-if="item.status === '已完成' && singleDemandStatus(item) === 'icon-status-done'"
                  src="@/assets/images/mine/img／missionLabel／E／doneExpired／grey@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '待修改'"
                  src="@/assets/images/mine/img／missionLabel／B／awaitModify／yellow@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '撰写中'"
                  src="@/assets/images/mine/img／missionLabel／C／writing／blue@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '未补充已过期'"
                src="@/assets/images/mine/img／missionLabel／A／fillingExpired／grey@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '已取消'"
                src="@/assets/images/mine/img／missionLabel／E／cancelled／grey@2x.png" alt="">
              <p class="key-words">
                  {{ item.keyword || "暂无关键词. 请手动添加" }}
                </p>
              </div>
            </li>
          </ul>
        </div>
        <!-- 创建任务流程 -->
        <div class="task-content" :class="[singleDemandStatus(currentTask) + '-grey-fill', singleDemandStatus(currentTask) + '-grey-fill-click']">
          <span class="icon-status" :class="singleDemandStatus(currentTask)"></span>
          <div class="task-detail-time">
            {{
                  createTaskForm.createTaskType === 'multiple' ? 'YY-MM-DD' :
            currentTask.estimatedTime &&
            format(currentTask.estimatedTime, "yy.MM.dd")
            }}
          </div>
          <div class="task-detail-info">
            <div class="detail-item">
              <p class="detail-item-title">任务ID</p>
              <p class="detail-item-value detail-item-value-number">{{ currentTask.taskId && padNumber(currentTask.taskId, 4) || '——'}}</p>
            </div>
            <div class="detail-item">
              <p class="detail-item-title">状态</p>
              <img class="info-status-img" v-if="currentTask.status === '待补充'"
                src="@/assets/images/mine/img／missionDetail／A／awaitFilling／yellow@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '关键词审核中'"
                src="@/assets/images/mine/img／missionDetail／B／auditing／blue@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '待确认'"
                src="@/assets/images/mine/img／missionDetail／D／awaitConfirm／yellow@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '稿件修改中'"
                src="@/assets/images/mine/img／missionDetail／D／modifying／blue@2x.png" alt="">
              <img class="info-status-img"
                v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'"
                src="@/assets/images/mine/img／missionDetail／E／done／blue@2x.png" alt="">
              <img class="info-status-img"
                v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-done'"
                src="@/assets/images/mine/img／missionDetail／E／doneExpired／grey@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '待修改'"
                src="@/assets/images/mine/img／missionDetail／B／awaitModify／yellow@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '撰写中'"
                src="@/assets/images/mine/img／missionDetail／C／writing／blue@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '未补充已过期'"
                src="@/assets/images/mine/img／missionDetail／A／fillingExpired／grey@2x.png" alt="">
                <img class="info-status-img" v-if="currentTask.status === '已取消'"
                src="@/assets/images/mine/img／missionDetail／E／cancelled／grey@2x.png" alt="">
              <!-- <p
                      class="detail-item-value"
                      :class="singleDemandStatus(currentTask) + '-text'"
                    >
                      {{ currentTask.status.slice(-3) }}
                    </p> -->
            </div>
            <div class="detail-item">
              <p class="detail-item-title">稿件</p>
              <p class="detail-item-value">
                <span style="font-size: 17px; font-weight: 500">{{ currentTask.page || "--" }}</span>
                <span class="unit">篇</span>
              </p>
            </div>
            <div class="detail-item">
              <p class="detail-item-title">预计交稿</p>
              <p class="detail-item-value detail-item-value-number">
                {{
                  createTaskForm.createTaskType === 'multiple' ? 'YY-MM-DD' :
                currentTask.estimatedTime &&
                format(currentTask.estimatedTime, "yy.MM.dd")
                }}
              </p>
            </div>
          </div>
          <!-- 流程图 -->
          <div class="task-detail-process">
            <div class="process-icon">
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) === 0">
                <img v-if="currentTask.status === '未补充已过期'" src="@/assets/images/mine/img／mission／step／A／grey@2x.png" alt="" />
                <img v-else src="@/assets/images/mine/img／mission／step／A／yellow@2x.png" alt="" />
              </div>
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) <= 1">
                <img v-if="processList[1].includes(currentTask.status) && willDo.includes(currentTask.status)"
                  src="@/assets/images/mine/img／mission／step／B／yellow@2x.png" alt="" />
                <img v-else-if="processList[1].includes(currentTask.status)"
                  src="@/assets/images/mine/img／mission／step／B／blue@2x.png" alt="" />
                <img v-else src="@/assets/images/mine/img／mission／step／B／grey@2x.png" alt="" />
              </div>
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) <= 2">
                <img v-if="processList[2].includes(currentTask.status) && willDo.includes(currentTask.status)"
                  src="@/assets/images/mine/img／mission／step／C／blue@2x.png" alt="" />
                <img v-else-if="processList[2].includes(currentTask.status)"
                  src="@/assets/images/mine/img／mission／step／C／blue@2x.png" alt="" />
                <img v-else src="@/assets/images/mine/img／mission／step／C／grey@2x.png" alt="" />
  
              </div>
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) <= 3">
                <img v-if="processList[3].includes(currentTask.status) && willDo.includes(currentTask.status)"
                  src="@/assets/images/mine/img／mission／step／D／yellow@2x.png" alt="" />
                <img v-else-if="processList[3].includes(currentTask.status)"
                  src="@/assets/images/mine/img／mission／step／D／blue@2x.png" alt="" />
                <img v-else src="@/assets/images/mine/img／mission／step／D／grey@2x.png" alt="" />
              </div>
              <div class="process-icon-img">
                <img v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'"
                  src="@/assets/images/mine/img／mission／step／E／blue@2x.png" alt="" />
                <img v-else src="@/assets/images/mine/img／mission／step／E／grey@2x.png" alt="" />
              </div>
            </div>
            <span class="process-triangle"></span>
            <div ref="processListRef" class="process-content scrollbar-class">
              <!-- 创建任务 -->
              <div class="process-content-info" v-if="currentTask.status === '待补充'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>创建任务</span>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="process-content-container" v-show="!currentTask.slider">
                  <div v-if="activeDemand.type !== '单次任务'" class="process-content-item" :class="{'process-content-item-disabel': createTaskForm.taskId || activeDemand.type === '单次任务'}">
                    <div class="process-content-item-title">选择任务类型</div>
  
                    <div class="process-content-item-content">
                      <span class="item-choose-type" :class="{
                                'active-item-choose-type':
                                  createTaskForm.createTaskType === 'single',
                              }" @click="handleChangeType('single')">
                        <span class="content-item-icon"></span>
                        <span class="process-text">单次任务关键词</span>
                      </span>
                      <span class="item-choose-type" :class="{
                                'active-item-choose-type':
                                  createTaskForm.createTaskType === 'multiple',
                              }" @click="handleChangeType('multiple')">
                        <span class="content-item-icon content-item-icon-muiltiple"></span>
                        <span class="process-text">批量任务关键词</span>
                      </span>
                    </div>
                  </div>
  
                  <!-- 单个关键词 -->
                  <div class="process-content-item" v-show="createTaskForm.createTaskType === 'single'">
                    <div class="process-content-item-title">关键词</div>
                    <div class="process-content-item-content" :class="{'process-content-item-disabel': createTaskForm.taskId || activeDemand.type === '单次任务'}">
                      <span class="item-content-item active-item-process item-time-picker-process" :class="{
                                'item-time-picker-process-week':
                                  activeDemand.cycle === '周交',
                              }">
                              <a-date-picker :allow-clear="false" :disabled-input="true"
                              :disabled-date="disabledDayDate" :editable="false" :prefix-icon="DatePickerPrefix" v-if="activeDemand.cycle === '日交'" class="item-time-picker"
                          v-model="createTaskForm.estimatedTime" type="date" placeholder="Pick a day" :clearable="false"
                          format="YY.MM.DD" :teleported="false"/>
                          <a-week-picker size="small" :allow-clear="false" :disabled-input="true"
                          :day-start-of-week="1"
                          :disabled-date="disabledWeekDate" :editable="false" :prefix-icon="DatePickerPrefixWeek" v-if="activeDemand.cycle === '周交'" class="item-time-picker"
                          v-model="createTaskForm.estimatedTime" type="week" placeholder="周交范围" :clearable="false"
                          :format="`YY.MM.DD-${
                                  createTaskForm.estimatedTime &&
                                  format(
                                    add(createTaskForm.estimatedTime, { days: 6 }),
                                    'yy.MM.dd'
                                  )
                                }`" :teleported="false" 
              />
                      </span>
                    </div>
                    <div class="process-content-keywords">
                      <a-textarea @input="createFormButton" class="mt-8 form-item-textarea" maxlength="2000" v-model="createTaskForm.keyword"
                        placeholder="请写下您预想的关键词. " type="textarea" resize="none" autosize/>
                    </div>
                  </div>
                  <!-- 批量关键词 -->
                  <div class="process-content-item" v-show="createTaskForm.createTaskType === 'multiple'">
                    <div class="process-content-item-title">关键词</div>
  
                    <div class="process-content-keywords"
                      v-for="(item ,index) in createTaskForm.estimatedTimeList" :key="item.time">
                      <div class="mt-12 time-picker-flex">

                      <div class="multiple-task-time item-content-item item-time-picker-process"
                      :class="{
                                'item-time-picker-process-week':
                                  activeDemand.cycle === '周交',
                              }"
                      v-show="createTaskForm.createTaskType === 'multiple'">
                      <a-date-picker :allow-clear="false" :disabled-input="true" :disabled-date="disabledDayDate"  :editable="false" :prefix-icon="DatePickerPrefix" v-if="activeDemand.cycle === '日交'" class="item-time-picker" v-model="item.time"
                          type="date" format="YY.MM.DD" placeholder="Pick a day" :clearable="false" :teleported="false"></a-date-picker>
                          <a-week-picker size="small" :allow-clear="false" :disabled-input="true" :disabled-date="disabledWeekDate" :editable="false" :prefix-icon="DatePickerPrefixWeek" v-if="activeDemand.cycle === '周交'" class="item-time-picker" v-model="item.time"
                          type="week" :format="`YY.MM.DD-${
                                  item.time &&
                                  format(add(item.time, { days: 6 }), 'yy.MM.dd')
                                }`" placeholder="周交范围" :clearable="false" :teleported="false" ></a-week-picker>
                    </div>
                    <div class="delete-button" v-show="(createTaskForm?.estimatedTimeList?.length - 1 == index) && index != 0"
                        @click="handleRemoveTime()">
                        <img src="@/assets/images/mine/icon／missionlist／removeMission／red@2x.png" alt="" />
                      </div>
                    </div>
                    <a-textarea @input="createFormButton" class="mt-8 form-item-textarea" maxlength="2000" v-model="item.keyword"
                        placeholder="请写下您预想的关键词. " type="textarea" resize="none" autosize/>

                    </div>
                    <div v-show="createTaskForm.createTaskType === 'multiple'" class="add-button"
                      @click="handleAddTime()">
                      <img src="@/assets/images/mine/icon／missiondetail／addbutton／add／black@2x.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 未补充已过期 -->
              <div class="process-content-info" v-if="currentTask.status === '未补充已过期'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>创建任务.</span>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="process-content-container" v-show="!currentTask.slider">
                  <!-- 单个关键词 -->
                  <div class="process-content-item">
                    <div class="process-content-item-title" style="color: #ADAEB3">关键词</div>
                    <div class="process-content-item-content">
                      <span class="item-content-item active-item-process item-time-picker-process" :class="{
                                'item-time-picker-process-week':
                                  activeDemand.cycle === '周交',
                              }">
                                        <a-date-picker :allow-clear="false" :disabled-input="true"
                                        :prefix-icon="DatePickerPrefix" v-if="activeDemand.cycle === '日交'" class="item-time-picker"
                          v-model="createTaskForm.estimatedTime" type="date" placeholder="Pick a day" :clearable="false"
                          format="YY.MM.DD" :teleported="false"
    />
    <a-week-picker size="small" :allow-clear="false" :disabled-input="true"
    :day-start-of-week="1"
    :prefix-icon="DatePickerPrefixWeek" v-if="activeDemand.cycle === '周交'" class="item-time-picker"
    v-model="createTaskForm.estimatedTime" type="week" placeholder="周交范围" :clearable="false"
    :format="`YY.MM.DD-${
            createTaskForm.estimatedTime &&
            format(
              add(createTaskForm.estimatedTime, { days: 6 }),
              'yy.MM.dd'
            )
          }`" :teleported="false"
/>
                      </span>
                    </div>
                    <div class="process-content-keywords">
                      <a-textarea class="mt-8 form-item-textarea form-item-textarea-diabled" disabled maxlength="2000" v-model="currentTask.keyword"
                        placeholder="当前任务超时, 视为用户主动放弃此次交稿服务. 您可以通过创建新任务提交关键词. " type="textarea" resize="none" autosize/>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 关键词审核中 -->
              <div class="process-content-info" v-if="currentTask.status === '关键词审核中'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>该任务正在进行关键词审核, 您当前不可操作.</span>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <p class="keywords-item-time">
                      关键词提交于
                      {{ item.time &&item.time && format(item.time, "yy.MM.dd - HH:mm:ss") }} 
                      <span v-if="item.status === 2">| 平台驳回于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                      <template v-if="item.status === 2">
                        <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                      <!-- <div class="process-content-time">
                        Ver.
                        {{ index + 1 }}
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- 待修改 -->
              <div class="process-content-info" v-if="currentTask.status === '待修改'">
                <div class="process-content-title edit-color" @click="currentTask.slider = !currentTask.slider">
                  <span>关键词审核不通过, 请您修改后重新提交审核.</span>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <p class="keywords-item-time">
                      关键词提交于
                      {{ item.time && format(item.time, "yy.MM.dd - HH:mm:ss") }} <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                  </div>
                  <p class="keywords-item-time mt-24">
                    修改关键词
                  </p>
                  <div class="process-content-item-content process-content-keywords">
                    <a-textarea class="form-item-textarea" maxlength="2000" v-model="currentTask.keywordEdit"
                      placeholder="请在此输入修改后的关键词" type="textarea" resize="none" autosize></a-textarea>
                  </div>
                </div>
              </div>
  
              <!-- 撰写中 -->
              <div class="process-content-info" v-if="currentTask.status === '撰写中'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>关键词审核已通过, 编辑们加班为您创作文案中...</span>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                  <div class="keywords-item">
                    <p class="keywords-item-time">
                      稿件预览
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <el-icon>
                          <Document />
                        </el-icon>
                        稿件撰写中
                      </p>
                      <div class="process-content-time">
                        Ver.{{ currentTask.keywordList.filter(item => item.status === 5).length + 1 }}
  
                      </div>
                    </div>
  
                  </div>
                </div>
              </div>
              <!-- 待确认&已完成 -->
              <div class="process-content-info" v-if="currentTask.status === '待确认' || currentTask.status === '已完成'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <div v-if="currentTask.status === '待确认'">
                  稿件撰写完毕, 您现在可查阅稿件并确认接收.
                </div>
                <div
                  v-else-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'">
                  您的稿件已确认接收, 请务必在30天内保存到您的设备中.
                </div>
                <div v-else>
                  您的稿件自确认接收已超过30天期限, 无法为您再次提供下载服务.
                </div>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                </div>
              </div>
              <!-- 稿件修改中 -->
              <div class="process-content-info" v-if="currentTask.status === '稿件修改中'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>已收到您的意见, 编辑们将尽快为您修改稿件.</span>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                  <div class="keywords-item">
                    <p class="keywords-item-time">
                      新版稿件撰写中
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <el-icon>
                          <Document />
                        </el-icon>
                        稿件撰写中
                      </p>
                      <div class="process-content-time">
                        Ver.{{ currentTask.keywordList.filter(item => item.status === 5).length + 1 }}
  
                      </div>
                    </div>
  
                  </div>
                </div>
              </div>
              <!-- 已取消 -->
              <div class="process-content-info" v-if="currentTask.status === '已取消'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>该任务已取消.</span>
                  <img v-if="!currentTask.slider" src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/images/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.manuscriptList?.length === 1 || currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                </div>
              </div>
              <!-- 创建任务 -->
              <div class="commit-button" v-if="willDo.includes(currentTask.status) && currentTask.status !== '待确认'">
                <div class="normal-button" v-if="createFormButton === 'normal'" @click="handelCreateTask">
                </div>
                <div class="forbidden-button" v-if="createFormButton === 'forbidden'">
                </div>
              </div>
              <div class="commit-button-forbidden" v-if="currentTask.status === '撰写中' || currentTask.status === '稿件修改中'">
                <img src="@/assets/images/mine/button／confirmManuscript／forbid@2x.png" alt="" />
              </div>
              <div @click="handleGotoPreview" class="commit-button-willconfirm" v-if="currentTask.status === '待确认'">
              </div>
              <div @click="handleDownLoad" class="downLoad-commit-button"
                v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'">
                <!-- <img src="@/assets/images/mine/button／downloadOne／normal@2x.png" alt="" /> -->

              </div>
              <!-- 创建任务时用户须知 -->
              <div class="notes-for-user" v-if="processList[0].includes(currentTask.status) || currentTask.status === '未补充已过期'">
                <template v-if="activeDemand.cycle === '日交'">
                <p>用户须知 (日交任务)</p>
                <p>· 在创建补充关键词时, 建议您从最近的可选日期开始创建, 以避免对收稿时间产生预期之外的影响.</p>
                <p>
                  · 日交任务的关键词必须在任务对应交稿日至少前1天完成补充; 交稿日当天不可填写或修改关键词.
                </p>
                <p>
                  · 若任务未提供任何关键词 (截至交稿日前1天23:59:59)，则视为用户主动放弃此次交稿服务.
                </p>
                <p>
                  · 关键词提交审核后不能进行修改. 关键词描述越丰富、越准确，小编撰写的文章质量越高哦
                </p>
              </template>
              <template v-else>
                <p>用户须知 (周交任务)</p>
                <p>· 在创建补充关键词时, 建议您从最近的可选日期开始创建, 以避免对收稿时间产生预期之外的影响.</p>
                <p>
                  · 周交任务中的关键词须在任务周期开始的前1天完成补充; 周交任务开始后不可填写或修改关键词.
                </p>
                <p>
                  · 若周交任务未提供任何关键词 (截至任务周期开始前1天23:59:59)，则视为用户主动放弃此次交稿服务.
                </p>
                <p>
                  · 关键词提交审核后不能进行修改. 关键词描述越丰富、越准确，小编撰写的文章质量越高哦
                </p>
              </template>
              </div>
              <!-- 确认稿件时用户须知 -->
              <div class="notes-for-user" v-if="currentTask.status === '待确认' || currentTask.status === '稿件修改中'">
                <p>温馨提示</p>
                <p>· 若您觉得稿件符合要求, 可点击上方蓝色按钮确认接收稿件.</p>
                <p>
                  · 确认接收稿件之前, 您可以查看/预览稿件.
                </p>
                <p>
                  · 每个版本的稿件在确认任务接收后的30天内都可以进行预览.
                </p>
                <p>
                  · 若您连续XX天未操作待确认稿件 (即提交任意修改请求)，则系统将自动确认收稿.
                </p>
                <p></p>
              </div>
              <!-- 已完成时用户须知 -->
              <div class="notes-for-user" v-if="currentTask.status === '已完成'">
                <p>用户须知</p>
                <p>· 30天内(自确认接收时刻起), 您可以下载最新版本稿件至您的设备中.</p>
                <p>
                  · 30天内(自确认接收时刻起), 您可以在平台上预览任意版本的稿件内容.
                </p>
                <p>
                  · 30天后(自确认接收时刻起), 您的稿件将从平台服务器上移除. 请合理规划以避免不必要的损失.
                </p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <confirmTaskModal @reFreshTable="handleClickTab" :taskId="currentTask.taskId" ref="confirmDiaologRef"></confirmTaskModal>

    <diaologBox :confirmText="diaologInfo.confirmText" @setLoading="setLoading" :loading="addLoading" ref="confirmDiaolog" @confirm="diaologInfo.confirmDiaolog">
    <template #title>{{ diaologInfo.title }}</template>
    <span v-html="diaologInfo.text"></span>
  </diaologBox>
  <weekDiaolog ref="weekDiaologRef" @confirm="confirmWeekDiaolog">
    <template #title>
      <div class="mine-week-diaolog-container-pay-box">
        <div class="title">任务异常提醒</div>
        <p>您可以点击页面其他区域暂时关闭此提醒.</p>
        <div class="slider"></div>
  </div>
    </template>
    <p>您当前余额已不足支持推进新的撰写任务. <br/>
为了避免对任务进度产生影响, 请记得及时为您的账户充值.</p>
  </weekDiaolog>
  <contribution ref="digdogRef" :taskList="downLoadList" @refresh="handleClickTab" :type="parentMessage"></contribution>
  </div>
</template>

<script lang="ts" setup>
import { getDemandList as queryDemandList, getMyTaskListPost as queryTaskList, getKeyWordList as keyWordsList, checkBalance, queryFilieList as updateTask, addTask } from '@/apis';
import { ref, onMounted, shallowRef } from "vue";
import { format, add, startOfWeek, subDays } from "date-fns";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
import preFixImg from '@/assets/images/mine/icon／clock／black@2x.png';
import preFixImgWeek from '@/assets/images/mine/icon／calendar／black@2x.png';
import diaologBox from "./components/diaolog.vue";
import weekDiaolog from "./components/weekDiaolog.vue";
import { Message } from '@arco-design/web-vue'
import confirmTaskModal from './components/confirmTaskModal.vue';
import contribution from './components/contribution.vue';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx'
import axios from 'axios'

const route = useRoute();
const curdemandId = route.query.id;
const reChooseTask = async() => {
    let curDemandTemp = demandTabInfo.value.find(item => item.demandId == history.state.demandId);
    if (curDemandTemp) {
      await handleClickTab(curDemandTemp);
      let curTaskTemp = activeDemand.value.taskList.find(item => item.id == history.state.taskId);
      if (curTaskTemp) {
        handleClickTask(curTaskTemp);
      }
    }
}
const confirmDiaologRef = ref(null);
const filterIshow = ref({
  status: false,
  time: false
})
const filterTimepickerPopRef = ref(null);
const filterStatuspickerPopRef = ref(null);
const setLoading = (flag) => {
  addLoading.value = flag;
}
let currentTaskPage = {
  page: 1,
  num: 10
}
const statusMap = {
  1: "关键词审核中",
  2: "待修改",
  3: "撰写中",
  4: "撰写中",
  5: "待确认",
  6: "撰写中",
  7: "稿件修改中",
  8: "已完成",
  0: "待补充",
}
const valuedatarili = ref([])
const currentDate = ref(new Date().toLocaleDateString());  
// 计算去年的今天的日期  
const lastYearToday = computed(() => {  
  const today = new Date();  
  const lastYear = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());  
  return lastYear.toLocaleDateString();  
}); 
valuedatarili.value = [lastYearToday.value, currentDate.value];  
// const [year, month, day] = currentDate._value.split('/');  
// const [year1, month1, day1] = lastYearToday._value.split('/');  
// const monthIndex = parseInt(month, 10) - 1;  
// const monthIndex1 = parseInt(month1, 10) - 1;  
// console.log(currentDate._value,lastYearToday.value,'顶顶顶')
const diaologInfo = reactive({
  title:'',
  text:''
})
const filterTimepickerRef = ref(null)
const weekDiaologRef = ref(null);
const confirmDiaolog = ref(null)
const keyWordsMin = 10;
const dialogdemloes = ref(false);
const settingitem = ref(0);
const codeyan = ref("获取验证码");
const isPasswordVisible = ref(false);
const togglePasswordVisibility = () => {
	isPasswordVisible.value = !isPasswordVisible.value;
}
const settingList = ["我的账号", "修改密码", "退出登录"];
const gosettingitem = (a) => {
  settingitem.value = a;
};
const tradeList = [{
  name: "全部",
  value: 0
},
{
  name: "充值",
  value: 1
},
{
  name: "支出",
  value: 3
}];
const processList = [
  ["待补充", "未补充已过期"], ["关键词审核中", "待修改"], ["撰写中"], ["待确认", "稿件修改中"], ['已完成']
];
const DatePickerPrefix = shallowRef({
  render() {
    return h('img', {'src': preFixImg, 'class': 'prefix-icon', 'width': '16px', 'height': '16px'})
  },
});
const DatePickerPrefixWeek = shallowRef({
  render() {
    return h('img', {'src': preFixImgWeek, 'class': 'prefix-icon', 'width': '16px', 'height': '16px'})
  },
});
  const  nicknames = ref('')
  const typeMap = {
    1: "账户充值",
    2: "后台充值",
    3: "任务扣费",
    4: "后台扣除",
    5: '任务退回'
  }
  const radeOrderList = ref([])
onMounted(() => {
  handleClickTab()
}); 
// 搜索相关
const taskFilterForm = ref({
  searchText: "",
  taskList:[],
  timeFilter:''
});
const resetSearchForm = () => {
  taskFilterForm.value = {
  searchText: "",
  taskList:[],
  timeFilter:''
}
currentTaskPage.page = 1;
}
const taskFilterList = ref([
  {
    title:'待处理任务',
    num: 12,
    isSelect: false,
    value: '2,5,0',
  },
  {
    title:'进行中任务',
    num: 12,
    isSelect: false,
    value: '1,3,4,7'
  },
  {
    title:'已结束任务',
    num: 12,
    isSelect: false,
    value: '8'
  }
])
const tradRef = ref(null)
const goTrade = () => {
  Trade.value = true;
  orderPage.page = 1;
  radeOrderList.value = [];
  tradeitem.value = 0;
  valuedatarili.value = [lastYearToday.value, currentDate.value];  
  // 请求交易记录接口
  queryOrderListData();
}
const tradeLoading = ref(false)
const orderPage = {
  page: 1,
  limit: 10,
  total:0
}
const orderRef = ref(null)
const queryOrderListData = () => {
  tradeLoading.value = true
  records({
    way_in: tradeitem.value ? tradeitem.value : null,
    pay_time_start: valuedatarili.value[0] + ' 00:00:00',
    pay_time_end: valuedatarili.value[1] +' 23:59:59',
    ...orderPage
  }).then(res => {
        let resData = JSON.parse(res || '{}')
        radeOrderList.value = radeOrderList.value.concat((resData.result?.data || []).map(ii => {
          return {
            ...ii,
            ...ii.order_show,
            id: ii.id,
            balance_after_transaction: ii.balance_after_transaction,
            pay_type: ii.pay_type
          }
        }));
        orderPage.total = resData.result?.total || 0
        tradeLoading.value = false
  })
  // queryOrderList({
  //   type: tradeitem.value ? tradeitem.value : null,
  //   pay_time_start: valuedatarili.value[0] + ' 00:00:00',
  //   pay_time_end: valuedatarili.value[1] +' 23:59:59',
  // }).then(res => {
  //   let resData = JSON.parse(res || '{}')
  //   radeOrderList.value = resData.result?.data || [];
  //   tradeLoading.value = false
  // })
}
const demandTabInfo = ref([
]);
const activeDemand = ref({});
const currentTask = ref(demandTabInfo.value[0]?.taskList?.[0] || []);
const initTask = {
  taskId: "",
  status: "待补充",
  page: "1",
  estimatedTime: add(new Date(), { days: 1 }),
  keyword: "",
  createTaskType: "single",
  estimatedTimeList: []
};
// 创建任务表单
const createTaskForm = ref({
  taskId: "",
  status: "待补充",
  page: "1",
  estimatedTime: "YY-MM-DD",
  keyword: "",
  createTaskType: "single",
  estimatedTimeList:[]
});
const createFormButton = computed(() => {
  if(createTaskForm.value.createTaskType === 'single'){
    let len = createTaskForm.value.keyword.length;
    if (currentTask.value.status === '待修改') {
      len = currentTask.value?.keywordEdit?.length || 0;
    }
    if(len > keyWordsMin){
      return 'normal'
    }else{
      return 'forbidden'
    }
  }else{
    if(createTaskForm.value.estimatedTimeList.some(dd => dd.keyword.length > keyWordsMin)){
      return 'normal'
    }else{
      return 'forbidden'
    }
  }
})
const resetTaskForm = () => {
  createTaskForm.value = {
  taskId: "",
  status: "待补充",
  page: "1",
  estimatedTime: "YY-MM-DD",
  keyword: "",
  createTaskType: "single",
  estimatedTimeList:[]
};
}
const computedPassKeyWord = computed(() => {
  return (currentTask.value?.keywordList || []).find((item) => {
    return item.passTime;
  });
})
const openFile = () => {
  if (!activeDemand.value.annex_url.src) return;
  window.open(activeDemand.value.annex_url.src);
}
const handleClickTab = item => {
  resetFilter();
  return new Promise((resolve, reject) => {
  // 获取需求详情
  queryDemandList({
    demand_id: curdemandId
  }).then(async(res) => {
    let resData = JSON.parse(res || '{}');
    if (resData.code === 200) {
      let curDemand = resData.result.data[0] || {};
      let status = curDemand.status == 1 ? '进行中' : '已完成';
        // 判断是否过期
        if (status === '进行中' && new Date() > new Date(curDemand.end_time * 1000)) {
          status = '已完成';
        }
        let endTime = curDemand.end_time == 9999999999 ? '长期' :new Date(curDemand.end_time * 1000);
        activeDemand.value = {
          tabName: curDemand.name,
          demandId: curDemand.id,
          status: status,
          type: curDemand.repeat == 1 ? "重复任务" : "单次任务",
          cycle: curDemand.type == 1 ? '日交' : '周交',
          price: curDemand.price,
          // validityPeriod: format(new Date(curDemand.start_time * 1000), "yy.MM.dd") + '-' + endTime,
          lastTime: new Date(curDemand.atest_delivery_time * 1000),
          delivered: curDemand.num_ok,
          unDown: curDemand.num_pick,
          taskList:[],
          start_time: new Date(curDemand.start_time * 1000),
          end_time: endTime
        }
      activeDemand.value.keyword_id = curDemand.keyword_id;
      let annex_url = curDemand.annex_url?.trim()
      if(annex_url){
        try{
          annex_url = JSON.parse(annex_url)
        }catch{
          annex_url = {
            src: annex_url,
            name: '文件'
          }
        }
      }
      activeDemand.value.annex_url = annex_url;
      activeDemand.value.delivered = curDemand.num_ok;
      activeDemand.value.unDown = curDemand.num_pick;
      activeDemand.value.descripttion = curDemand.descript;
      activeDemand.value.lastTime = curDemand.latest_delivery_time;
      resetSearchForm();
      await queryTaskListInfo(curdemandId, currentTaskId.value)//获取任务列表；
      resolve();
    }else{
      demandTabInfo.value = []
    }
    
  })
  })

  // taskFilterList.value.forEach(dd => {
  //    queryTaskListOptions(item.demandId,dd)
  // })
  

  //   currentTask.value = item?.taskList?.[0] ?? initTask;
};
const processListRef = ref(null);
const currentTaskId = ref('')
const handleClickTask = (item, flag) => {
  if (item) {
    currentTaskId.value = item.taskId
    currentTask.value = item;
    createTaskForm.value = Object.assign({}, {...item,estimatedTimeList:[], createTaskType: "single"});
    if(item.status !== '待补充'){
    // 获取当前KeywordsList
    keyWordsList({
            keyword_id: item?.taskId,
            status_in: '0,1,2,3,5,6,7,8',
            num: 10000,
        }).then(res => {  
    let resData = JSON.parse(res || '{}');
    if (resData.code === 200) {
      let manuscriptNum = (resData.result.data || []).filter(ii => ii.status == 5).length;
      currentTask.value.keywordList = resData.result.data.map(ii => {
        let endTime = ''
        if (ii.end_time && ii.end_time=='9999999999') {
          endTime = '长期'
        }
        if (ii.end_time) {
          endTime = format(new Date(ii.endTime * 1000), "yyyy-MM-dd HH:mm:ss")
        }
        let res = {
          ...ii,
          time: ii.keyword_time && format(new Date(ii.keyword_time * 1000), "yyyy-MM-dd HH:mm:ss"),
          keyword: ii.keyword,
          rejectReason: ii.detailed,
          rejectTime: ii.create_time,
          endTime,
        }
        if(ii.status == 5){
          res.manuscriptNum = manuscriptNum;
          manuscriptNum--
        }
        return res
      }).reverse();
      nextTick(() => {
          // 滚动条到最底部
          processListRef.value.scrollTop = processListRef.value.scrollHeight;
      })
    }

  })
    }
  } else {
    if(activeDemand.value.type === "单次任务" && alltaskTime.value?.length){
      //判断是否为过滤条件
      if(flag){
        EventBus.emit("openToastBox", ["单次任务只能有一个任务"]);
      }
      return;
    }
    
    createTaskForm.value = Object.assign({}, initTask);
    if (activeDemand.value.cycle === "周交") {
      // 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
      let startWeekTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
      const startOfThisWeek = startOfWeek(startWeekTime, { weekStartsOn: 1 });
      createTaskForm.value.estimatedTime = add(startOfThisWeek, { weeks: 1 });
      createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        },
      ];
      // 如果第二周大于周交结束时间则不需要第二条
      if (new Date(add(createTaskForm.value.estimatedTime, { weeks: 1 })) <= new Date(activeDemand.value.end_time)) {
        createTaskForm.value.estimatedTimeList.push({
          time: add(createTaskForm.value.estimatedTime, { weeks: 1 }),
          keyword: ""
        })
      }
    } else {
      if(activeDemand.value.type === '单次任务'){
          createTaskForm.value.estimatedTime = activeDemand.value.start_time;
      }else{
        // 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
        let startDayTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
        createTaskForm.value.estimatedTime = add(startDayTime, { days: 1 });
      }
      createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        }
      ];
            // 如果第二天大于日交结束时间则不需要第二条
            if (new Date(add(new Date(), { days: 1 })) <= new Date(activeDemand.value.end_time)) {
                createTaskForm.value.estimatedTimeList.push({
                  time: add(new Date(), { days: 1 }),
                  keyword: ""
                })
            }
    }
    currentTask.value = createTaskForm.value;
  }
};
const willDo = ["待补充", "待修改", "待确认"];
const doing = ["稿件修改中", "撰写中", "关键词审核中", "已完成"];
// 计算单个任务icon颜色
const singleDemandStatus = item => {
  if (willDo.includes(item.status)) {
    return "icon-status-will-do";
  } else if (doing.includes(item.status)) {
    if (item.status === "已完成" && item.completionTime) {
      let days =
        (new Date() - new Date(item.completionTime)) / (1000 * 3600 * 24);
      if (days > 30) {
        return "icon-status-done";
      } else {
        return "icon-status-doing";
      }
    } else {
      return "icon-status-doing";
    }
  }else if(item.status === '未补充已过期'){
    return "icon-status-done";
  }
};
// 计算单个需求icon颜色
const demandStatus = item => {
  if (
    !item?.taskList?.length ||
    item.taskList.findIndex(item => willDo.includes(item.status)) > -1
  ) {
    return "icon-status-will-do";
  }
  let isDone = item.taskList.every(item => {
    return (
      item.status === "已完成" &&
      item.completionTime &&
      (new Date() - new Date(item.completionTime)) / (1000 * 3600 * 24) > 30
    );
  });
  if (isDone) {
    return "icon-status-done";
  } else {
    return "icon-status-doing";
  }
};
const digdogRef = ref(null);
const parentMessage = ref(null); // 父组件的数据
const downLoadList = ref([]);
const gocontributton = (e, num) => {
  if (!num) return
  downLoadList.value = []
  parentMessage.value = e;
  digdogRef.value.show()
  // let endTime = new Date()
  // let startTime = subDays(new Date(), 60)
  let parmas = {
    demand_id: activeDemand.value.demandId,
    page: 1,
    num: 1000,
    status_in: "8",
    // end_start_time: format(startTime, "yyyy-MM-dd 00:00:00"),
    // end_end_time: format(endTime, "yyyy-MM-dd 23:59:59")
  }
  if (e === 2) {
    parmas.is_download = 2;
  }
  // 请求接口
  queryTaskList(parmas).then(res => {
    let resData = JSON.parse(res || '{}');
    if (resData.code === 200) {
      downLoadList.value = [...downLoadList.value, ...(resData.result?.data || []).map(dd => {
          let status = statusMap[dd.status] || '';
          let keyword = dd.keyword === ' ' ? '' : dd.keyword
        if (status === '待补充' && new Date() > new Date(dd.start_time * 1000)) {
          status = '未补充已过期';
          keyword = '未及时添加关键词, 此任务已过期'
        }
        if (dd.status == 0 && keyword) {
          status = '已取消'
        }
        return {
          ...dd,
          keyword: keyword,
          taskId: dd.id,
          status: status,
          page: "1",
          estimatedTime: format(+(dd.start_time + '000'), "yyyy-MM-dd"),
          keywordList: [],
          versionNum: 1,
          manuscriptList:[],
          endTime: format(+(dd.end_time + '000'), "yyyy-MM-dd"),
        }
      })]
    }
  })
};
const initMutipDate = () => {
  if (activeDemand.value.cycle === "周交") {
      // 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
      let startWeekTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
      const startOfThisWeek = startOfWeek(startWeekTime, { weekStartsOn: 1 });
      createTaskForm.value.estimatedTime = add(startOfThisWeek, { weeks: 1 });
      createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        },
      ];
      // 如果第二周大于周交结束时间则不需要第二条
      if (new Date(add(createTaskForm.value.estimatedTime, { weeks: 1 })) <= new Date(activeDemand.value.end_time)) {
        createTaskForm.value.estimatedTimeList.push({
          time: add(createTaskForm.value.estimatedTime, { weeks: 1 }),
          keyword: ""
        })
      }
    } else {
// 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
let startDayTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
        createTaskForm.value.estimatedTime = add(startDayTime, { days: 1 });
        createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        }
      ];
            // 如果第二天大于日交结束时间则不需要第二条
            if (new Date(add(new Date(createTaskForm.value.estimatedTime), { days: 1 })) <= new Date(activeDemand.value.end_time)) {
                createTaskForm.value.estimatedTimeList.push({
                  time: add(new Date(createTaskForm.value.estimatedTime), { days: 1 }),
                  keyword: ""
                })
            }
    }
}
const confirmCreateTask = () => {
  createTaskForm.value.estimatedTimeList.pop();
  confirmDiaolog.value.settingVisible(false);
  Message.success("已确认操作")
}
const handleRemoveTime = () => {
  if (createTaskForm.value.estimatedTimeList[createTaskForm.value.estimatedTimeList.length - 1].keyword.length > 0) {
    diaologInfo.title = "确认要继续操作吗?";
    diaologInfo.confirmText = "确认"
    diaologInfo.text = "您已经进行了填写.<br/>若您执意要继续, 此部分已编辑内容将丢失请确认操作.";
    diaologInfo.confirmDiaolog = confirmCreateTask
    confirmDiaolog.value.settingVisible()
  }else{
  createTaskForm.value.estimatedTimeList.pop();
  }
};
const handleChangeType = (flag) => {
  if(createTaskForm.value.createTaskType === 'multiple' && createTaskForm.value.estimatedTimeList.some(dd => dd.keyword.length)){
    diaologInfo.title = "确认要继续操作吗?";
    diaologInfo.confirmText = "确认"
    diaologInfo.text = "您已经进行了填写.<br/>若您执意要继续, 此部分已编辑内容将丢失请确认操作.";
    diaologInfo.confirmDiaolog = () => {
      createTaskForm.value.createTaskType = flag;
      initMutipDate();
      confirmDiaolog.value.settingVisible(false);
      Message.success("已确认操作")
    }
    confirmDiaolog.value.settingVisible()
  }else{
    createTaskForm.value.createTaskType = flag;
    initMutipDate()
  }
}
const resetCreateTaskForm = () => {
    createTaskForm.value = {
    taskId: "",
    status: "待补充",
    page: "1",
    estimatedTime: "YY-MM-DD",
    keyword: "",
    createTaskType: "single",
    estimatedTimeList:[]
  }
  if (activeDemand.value.cycle === "周交") {
    const startOfThisWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
    createTaskForm.value.estimatedTime = add(startOfThisWeek, { weeks: 1 });
  }else{
    if(activeDemand.value.type === '单次任务'){
      createTaskForm.value.estimatedTime = activeDemand.value.start_time;
    }else{
      createTaskForm.value.estimatedTime = add(new Date(), { days: 1 });
    }
  }
}
const confirmWeekDiaolog = () => {
  weekDiaologRef.value.settingVisible(false);
}
const handelCreateTask = () => {
  if (currentTask.value.status === "待补充") {
    // 前端校验余额是否充足

  // 后端校验余额是否充足
  let num = 1;
  if (createTaskForm.value.createTaskType === 'multiple') {
    num = createTaskForm.value.estimatedTimeList?.length || 0;
  }
  checkBalance({
    demand_id: activeDemand.value.demandId,
    num
  }).then(resCheck => {
    let resData = JSON.parse(resCheck || '{}');
    if(resData.code == 200){
      // 余额充足
      diaologInfo.title = "提交任务";
      diaologInfo.text = "确认提交后已填写关键词的任务将会提交至平台进行审核, 您后续将无法修改对应任务的关键词 (审核不通过为例外情况).";
      diaologInfo.confirmText = "确认提交"
      diaologInfo.confirmDiaolog = () => {
        //调用新增接口
        handleAddKeyword();
  }
  confirmDiaolog.value.settingVisible()
    }else{
      if(resData.message === '您的余额不足，请充值'){
        weekDiaologRef.value.settingVisible()
      }else{
        Message.error(resData.message || "提交失败")
      }
    }
  })
}else if(currentTask.value.status === "待修改"){
  diaologInfo.title = "提交任务";
  diaologInfo.confirmText = "确认"
  diaologInfo.text = "确认提交后已填写关键词的任务将会提交至平台进行审核, 您后续将无法修改对应任务的关键词 (审核不通过为例外情况).";
  diaologInfo.confirmDiaolog = () => {
    //调用关键词修改接口
    updateTask({
        switch: 1,
        keyword: currentTask.value.keywordEdit,
        keyword_id: currentTask.value.taskId,
      }).then(res => {
        let resData = JSON.parse(res || '{}');
        if (resData.code === 200) {
          Message.success(resData.message || "提交成功")
          confirmDiaolog.value.settingVisible(false);
          // 获取当前任务列表
          resetSearchForm();
          queryTaskListInfo(activeDemand.value.demandId)
        }
      })
  }
  confirmDiaolog.value.settingVisible()
  
}

}
const addLoading = ref(false)
// 新增接口
const handleAddKeyword = async() => {
  let parmas = {
    demand_id: activeDemand.value.demandId,
    start_time: '',
    end_time: '',
    keyword: ''
  }
  if (createTaskForm.value.createTaskType === 'single') {
    let flag = alltaskTime?.value?.some(dd => format(dd, 'yyyy-MM-dd') == format(createTaskForm.value.estimatedTime, 'yyyy-MM-dd'))
    if(flag && !currentTask.value.taskId){
      Message.warning("当前时间已存在任务，请重新选择时间！");
      return;
    }
      if(activeDemand.value.type === '单次任务'){
        parmas.start_time = format(activeDemand.value.start_time, "yyyy-MM-dd 00:00:00");
        parmas.end_time = format(activeDemand.value.end_time, "yyyy-MM-dd 23:59:59");
      }else{
        parmas.start_time = format(createTaskForm.value.estimatedTime, "yyyy-MM-dd 00:00:00");
      if(activeDemand.value.cycle === "日交"){
        parmas.end_time = format(createTaskForm.value.estimatedTime, "yyyy-MM-dd 23:59:59");
      }else{
        parmas.end_time = format(
            add(createTaskForm.value.estimatedTime, { days: 6 }),"yyyy-MM-dd 23:59:59"
          )
      }
    }
    parmas.keyword = createTaskForm.value.keyword;
    addLoading.value = true
    if (createTaskForm.value.taskId) {
      updateTask({
        switch: 6,
        keyword: createTaskForm.value.keyword,
        keyword_id: createTaskForm.value.taskId,
      }).then(res => {
        let resData = JSON.parse(res || '{}');
        if (resData.code === 200) {
          resetCreateTaskForm();
          confirmDiaolog.value.settingVisible(false);
            Message.success(resData.message || "提交成功")
            resetFilter()
            // 获取当前任务列表
            resetSearchForm();
            queryTaskListInfo(activeDemand.value.demandId, currentTask.value.taskId)
        }else{
            Message.error(resData.message || "提交失败")
        }
      })
    }else{
        addTask(parmas).then(res => {
        let resData = JSON.parse(res || '{}');
        addLoading.value = false;
        if (resData.code === 200) {
          resetCreateTaskForm();
          confirmDiaolog.value.settingVisible(false);
            Message.success(resData.message || "提交成功")
            resetFilter();
            // 获取当前任务列表
            resetSearchForm();
            queryTaskListInfo(activeDemand.value.demandId, resData?.result?.id)
        }else{
          Message.error(resData.message || "提交失败")
        }
      })
    }
  }else {
    if (createTaskForm.value.estimatedTimeList.length > 0) {
      if (hasDuplicateName(createTaskForm.value.estimatedTimeList)) {
        Message.warning("不能选择相同的日期，请重新选择时间！");
        return;
      }
      if(alltaskTime?.value?.some(dd => createTaskForm.value.estimatedTimeList.findIndex(ee => format(ee.time, 'yyyy-MM-dd') == format(dd, 'yyyy-MM-dd')) > -1)){
      Message.warning("当前时间已存在任务，请重新选择时间！");
      return;
    }

      addLoading.value = true;
      deguiAddKeyword(0)
    }

  }

};
const hasDuplicateName = (arr) => {
  const names = new Set();
  return arr.some(item => {
    if (names.has((new Date(item.time)).getTime())) {
      return true; // 找到重复
    }
    names.add((new Date(item.time)).getTime());
    return false;
  });
};
const deguiAddKeyword = (index) => {
  let ii = createTaskForm.value.estimatedTimeList[index];
        let parmas2 = {
          demand_id: activeDemand.value.demandId,
          start_time : format(ii.time, "yyyy-MM-dd 00:00:00"),
          end_time : null,
          keyword : ii.keyword,
        }
        if(activeDemand.value.cycle === "日交"){
            parmas2.end_time = format(ii.time, "yyyy-MM-dd 23:59:59");
          }else{
            parmas2.end_time = format(
                add(ii.time, { days: 6 }),"yyyy-MM-dd 23:59:59")
          }
          addTask(parmas2).then(res => {
        let resData = JSON.parse(res || '{}');
        if (resData.code === 200) {
          if (index < createTaskForm.value.estimatedTimeList.length - 1) {
            setTimeout(() => {
              return deguiAddKeyword(index + 1);
            }, 1000);
          }else{
            resetCreateTaskForm();
            confirmDiaolog.value.settingVisible(false);
            Message.success(resData.message || "提交成功")
            resetFilter()
            // 获取当前任务列表
            resetSearchForm();
            queryTaskListInfo(activeDemand.value.demandId)
            addLoading.value = false;
            return true
          }

        }else{
          addLoading.value = false;
          Message.error(resData.message || "提交失败")
        }
      })
          


}
const handleAddTime = () => {
  if (!createTaskForm.value.estimatedTimeList) {
    createTaskForm.value.estimatedTimeList = [];
  }
  let len = createTaskForm.value.estimatedTimeList.length || 0;
  let time = new Date();
  if (len > 0) {
    time = createTaskForm.value.estimatedTimeList[len - 1].time;
  }
  if (activeDemand.value.cycle === "日交") {
    createTaskForm.value.estimatedTimeList.push({
        time: add(time, { days: 1 }),
        keyword: ""
      });
    // if (len % 5 === 0) {
    //   for (let index = 0; index < 5; index++) {
    //   createTaskForm.value.estimatedTimeList.push({
    //     time: add(time, { days: index * 7 }),
    //     keyword: ""
    //   });
    //   }
    // }else{
    //   let newLen = 5 - (len % 5);
    //   for (let index = 0; index < newLen; index++) {
    //       createTaskForm.value.estimatedTimeList.push({
    //       time: add(time, { days: index * 7 }),
    //       keyword: ""
    //     });
    //   }
    // }
  }else{
    createTaskForm.value.estimatedTimeList.push({
        time: add(time, { days: 7 }),
        keyword: ""
      });
    // if (len % 3 === 0) {
    //   for (let index = 0; index < 3; index++) {
    //   createTaskForm.value.estimatedTimeList.push({
    //     time: add(time, { days: index + 1 }),
    //     keyword: ""
    //   });
    //   }
    // }else{
    //   let newLen = 3 - (len % 3);
    //   for (let index = 0; index < newLen; index++) {
    //     createTaskForm.value.estimatedTimeList.push({
    //     time: add(time, { days: index + 1 }),
    //     keyword: ""
    //   });
    //   }
    // }
  }
};
const  datajiaoyi  = (e)=>{
  // 请求接口
  console.log(e)
}
const Trade = ref(false);
const gocancel = () => {
  dialogdemloes.value = false;
  setting.value = false;
  Trade.value = false;
};
const Demand = () => {
  dialogdemloes.value = true;
};
let sttingType = ref(false);
const setting = () => {
  sttingType.value = !sttingType.value;
};
const tradeitem = ref(0);
const gotradeitem = (a) => {
  tradeitem.value = a;
  orderPage.page = 1;
  radeOrderList.value = []
  queryOrderListData();
}
const handleGotoPreview = () => {
  // window.location.href ='./preview?taskId=' + currentTask.value.taskId
  // window.open('./preview?taskId=' + currentTask.value.taskId)
  confirmDiaologRef.value.show()
}
const statusOrderMap = {
  2: 1,//待修改
  0: 1,
  5: 1,
  3: 4,
  4: 4,
  6: 4,
  7: 4,
  1: 5,
  8: 6,
  9: 7

}
const isFirst = ref(true)
const alltaskTime = ref([])
//获取任务列表（关键词列表）
const queryTaskListInfo = (demandId, taskId) => {
  return new Promise((resolve, reject) => {
  currentTaskPage.page = 1;
  let selectFilter = taskFilterList.value.filter(dd => dd.isSelect).map(dd => dd.value).join(",");
  let parmas = {
    demand_id: curdemandId,
    keyword: taskFilterForm.value.searchText,
    status_in: selectFilter ? selectFilter : '0,1,2,3,4,5,7,8',
    // admin_pc: 1,
    page: 1,
    num: 10000,
  }
  if (taskFilterForm.value.timeFilter) {
    parmas.end_start_time = format(taskFilterForm.value.timeFilter, "yyyy-MM-dd 00:00:00");
    if (activeDemand.value.cycle === "日交") {
      parmas.end_end_time = format(taskFilterForm.value.timeFilter, "yyyy-MM-dd 23:59:59");
    }else{
      parmas.end_end_time = format(add(taskFilterForm.value.timeFilter, { days: 6 }), "yyyy-MM-dd 23:59:59");
    }
    
  }
  queryTaskList(parmas).then(res => {
    let resData = JSON.parse(res || '{}');
    console.log(resData);
    
    // 获取当前任务列表的下拉数据
    taskFilterList.value[0].num = resData.result?.pending_tasks_num || 0;
    taskFilterList.value[1].num = resData.result?.in_progress_num || 0;
    taskFilterList.value[2].num = resData.result?.task_completed_num || 0;
    if (resData.code === 200) {
      if (isFirst.value) {
        alltaskTime.value = (resData.result?.data || []).map(dd => new Date(dd.start_time * 1000))
      isFirst.value = false;
      }
      
      activeDemand.value.taskList = (resData.result?.data || []).map(dd => {
        let status = statusMap[dd.status] || '';
        let keyword = dd.keyword === ' ' ? '' : dd.keyword
        if (status === '待补充' && new Date() > new Date(dd.start_time * 1000)) {
          status = '未补充已过期'
        }
        let order = dd.status;//用于排序
        if (dd.status == 0 && keyword) {
          status = '已取消'
          order = 9
        }
        return {
          ...dd,
          keyword: keyword,
          taskId: dd.id,
          status: status,
          page: dd.manuscripts_num,
          estimatedTime: format(+(dd.start_time + '000'), "yyyy-MM-dd"),
          keywordList: [],
          versionNum: 1,
          manuscriptList:[],
          completionTime: dd.confirm_time ? dd.confirm_time : null,
          order: status === '未补充已过期' ? 10 : statusOrderMap[order]
        }
      }).sort((a, b) => a.order - b.order);
      activeDemand.value.taskAll = resData.result?.total || 0;
      if (taskId) {
        handleClickTask(activeDemand.value?.taskList.find(dd => dd.id === taskId));
      }else{
        handleClickTask(activeDemand.value?.taskList?.[0]);
      }
    }
    resolve()
  })
})
}

const isLoading = ref(false);  
const hasMore = ref(true); // 假设有更多数据可以加载  
const scrollContainer = ref(null); 

const handleOpenTask = () => {
  if (!activeDemand.value.keyword_id) return;
  queryTaskList({
    demand_id: activeDemand.value.demandId,
    keyword_id: activeDemand.value.keyword_id,
    status_in: '0,1,2,3,4,5,7,8',
  }).then(res => {
    let resData = JSON.parse(res || '{}');
    if (resData.code === 200) {
      const curData = (resData.result?.data || []).map(dd => {
        let status = statusMap[dd.status] || '';
          let keyword = dd.keyword === ' ' ? '' : dd.keyword
        if (status === '待补充' && new Date() > new Date(dd.start_time * 1000)) {
          status = '未补充已过期';
          keyword = '未及时添加关键词, 此任务已过期'
        }
        if (dd.status == 0 && keyword) {
          status = '已取消'
        }
        return {
          ...dd,
          keyword: keyword,
          taskId: dd.id,
          status: status,
          page: "1",
          estimatedTime: format(+(dd.start_time + '000'), "yyyy-MM-dd"),
          keywordList: [],
          versionNum: 1,
          manuscriptList:[],
        }
      });
      handleClickTask(curData[0]);
      
    }
  })
}
function convertStyleToWidth(htmlString, containerWidth) {
  // 定义正则表达式以匹配样式中的百分比宽度
  const regex = /style\s*=\s*"[^"]*width\s*:\s*(\d+)%[^"]*"/gi

  // 替换函数
  return htmlString.replace(regex, (match, percentage) => {
    // 计算宽度
    const width = (containerWidth * parseFloat(percentage)) / 100
    // 返回新的宽度属性
    return `width="${width}"`
  })
}
function getBlob (url) {
		return new Promise(async (resolve, reject) => {
      let result = await axios.get(url)
      let curHmtl = result.data || '';
      try {
      // 将HTML内容转换为Word文档
      // var converted = htmlDocx.asBlob(html)
      const updatedHtml = curHmtl.replace(
        /style="width:\s*(\d+\.?\d*)px;\s*height:\s*(\d+\.?\d*)px;"/g,
        (match, width, height) => {
          return `width="${width}" height="${height}"`
        }
      )
      // const newUrl = `<div style="width: 1200px;">${updatedHtml}</div>`
      const updatedHtml2 = convertStyleToWidth(updatedHtml, 1200)
      // 将HTML内容转换为Word文档
      var converted = htmlDocx.asBlob(updatedHtml2)
      resolve(converted);
    } catch (err) {
      reject('word转换失败')
    }
			// const XML = new XMLHttpRequest();
			// XML.open('GET', url, true);
			// // XML.responseType = 'blob';
			// XML.onload = () => {
			// 	if (XML.status === 200) {
      //     // 返回的是html需要转为docx
			// 		// resolve(XML.response);
      //     console.log(XML.response);
          
      //     debugger
			// 	}
			// };
			// XML.send();
		});
	}
const downloadFile = (file) => {
	//下载文件
	function saveAs (blob, filename) {
		const elelink = document.createElement("a");
		elelink.style.display = 'none';
		elelink.download = filename;
		elelink.href = window.URL.createObjectURL(blob);
		document.body.appendChild(elelink);
		elelink.click();
		document.body.removeChild(elelink);
	}
	// 调用以上方法进行下载
	getBlob(file.url).then(blob => {
		saveAs(blob, file.name);
	});
}
const handleDownLoad = () => {
  updateTask({
      switch: 4,
      keyword_id: currentTask.value.taskId,
    }).then(async(res) => {
      let resData = JSON.parse(res || '{}');
      if (resData.code === 200) {
        let file_Arr = JSON.parse(resData.result || [])
        if (file_Arr.length <= 10) {
          file_Arr.forEach(file => {
          if (file.url) {
            downloadFile(file)
          }
        })
        }else{//大于10个打包下载
          const zip = new JSZip();
          try {
    // 使用 Promise.all 等待所有文件的 Blob 下载完成
    const filePromises = file_Arr.map(async (file) => {
      const blob = await getBlob(file.url);
      const fileName = file.name.endsWith('.docx') ? file.name : `${file.name}.docx`;
      const file2 = new File([blob], fileName, { type: blob.type });
      return { name: fileName, file: file2 };
    });

    // 等待所有文件处理完成
    const files = await Promise.all(filePromises);

    // 将所有文件添加到 zip 中
    files.forEach(({ name, file }) => {
      zip.file(name, file);
    });

    // 生成 ZIP 文件
    const content = await zip.generateAsync({ type: 'blob' });
    let zipName = currentTask.value.keyword || 'files'
    saveAs(content, `${zipName}.zip`);
  } catch (error) {
    console.error('生成 ZIP 文件失败', error);
  }
        }
        
    }else{
      Message.error(resData.message || "下载失败")
    }
  })
}
const handleChangeTimePicker = (date) => {
if (new Date(date) === new Date(taskFilterForm.value.timeFilter)) {
  taskFilterForm.value.timeFilter = '';//再次选相同的取消
}
}
const padNumber = (num, size) => {
    // 将数字转换为字符串
    let numStr = num.toString();
    // 计算需要补齐的位数
    let diff = size - numStr.length;
    // 如果需要补齐，则在数字前面添加相应数量的0
    if (diff > 0) {
        // 使用 Array 方法填充0，并拼接原始数字字符串
        numStr = '0'.repeat(diff) + numStr;
    }
    return numStr;
}
// 计算日交可交付时间
const disabledDayDate = (time) => {
  const now = Date.now();
  
  const isEql = alltaskTime?.value?.some(dd => dd.getTime() === time.getTime())
  return time < now || isEql;
}
//计算周交可交付时间
const disabledWeekDate = (time) => {
  const startOfThisWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
  const temTime = add(startOfThisWeek, { weeks: 1 })
  
  const timeStemp = startOfWeek(time, { weekStartsOn: 1 });
  const isEql = alltaskTime?.value?.some(dd => dd.getTime() == timeStemp.getTime())
  return time < temTime || isEql;
}
const resetFilter = () => {
  isFirst.value = true;
  taskFilterList.value.forEach(dd => dd.isSelect = false)
  taskFilterForm.value = {
  searchText: "",
  taskList:[],
  timeFilter:''
}
}
// 修改状态筛选的显示隐藏
const handleChangeStatusFilterShow = (flag) => {
  if(flag){
    filterIshow.value.status = true
  }else{
    filterIshow.value.status = false;
    queryTaskListInfo(activeDemand.value.demandId)
  }
}
</script>


<style lang="scss" scoped>
.create-center {
  background: #f3f3f5;
  overflow: overlay;
  .mt-8{
    margin-top: 8px;
}
.mt-12{
    margin-top: 12px;
}
.mt-24{
  margin-top: 24px;
}
  .create-center-content{
    width: 1200px;
    margin: 20px auto;
  }
  .Demand-tab-detail {
      width: 100%;
      height: 115px;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 24px 36px;
      box-sizing: border-box;
      position: relative;

      .detail-title-line {
        .orange {
          background: #e6842e;
        }

        .detail-setting {
          width: 24px;
          height: 24px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &>div {
            width: 4px;
            height: 4px;
            background: #c6c7cc;
            box-shadow: inset 1px 1px 1px 1px rgba(69, 96, 230, 0.26);
            border-radius: 50%;

            &+div {
              margin-top: 4px;
            }
          }
        }

        .detail-title {
          font-weight: bold;
          font-size: 14px;
          color: #7b7c80;
        }
      }

      .detail-content {
      margin-top: 12px;
      display: flex;
        .detail-item {
      position: relative;

      &:first-child {
        padding-right: 24px;
      }

      &+.detail-item {
        padding: 0 24px;

        &::before {
          content: "";
          width: 1px;
          height: 12px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background: rgba(0, 0, 0, 0.1);
        }
      }

      .detail-item-title {
        font-weight: 400;
        font-size: 12px;
        color: #adaeb3;
        white-space: nowrap;
      }

      .info-status-img {
        height: 18px;
      }

      .detail-item-value {
        margin-top: 4px;
        font-family: Komu A, Komu A;
        // font-weight: 500;
        font-weight: bold;
        font-size: 14px;
        color: #47484d;
        white-space: nowrap;
        line-height: 18px;

        .unit {
          font-weight: bold;
          font-size: 10px;
          color: #abaeb3;
          margin-left: 4px;
        }

        .unit-CNY {
          height: 11px;
        }
      }

      .detail-item-value-number {
        // font-size: 18px;
        .end-time-long{
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: bold;
          font-size: 14px;
        }
      }
    }
      }
    }

    .Demand-task-create {
      height: 791px;
      margin-top: 16px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;

      .task-list {
        width: 424px;
        padding: 32px;
        position: relative;
        box-sizing: border-box;

        &::after {
          content: "";
          width: 1px;
          height: 644px;
          background: #c6c7cc;
          position: absolute;
          right: 0;
          top: 47px;
        }

        .task-title-line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: #7b7c80;

          .task-num {
            color: #cc7529;
          }

          .arco-icon {
            font-size: 18px;
            color: #2e2f33;
            cursor: pointer;
          }
          .task-filter{
            display: flex;
            .tips-filter{
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #cc7529;
              position: absolute;
              right: 2px;
              top: 2px;
            }
            .icon-filter-normal{
              width: 28px;
              height: 28px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 4px;
              position: relative;
              cursor: pointer;
                margin-left: 8px;
                &:hover{
                  background: rgba(217, 217, 219, 0.5);
                }
            }
            .icon-selected{
              background: #d9d9db;
          }
          }

          .el-calendar-icon {
            margin-left: 34px;
          }

          .task-search-box {
            :deep(.arco-input-prefix){
              .arco-icon {
                  color: rgba(46, 47, 51, 0.6);
                  font-size: 18px;
                }
            }
            :deep(.arco-input-wrapper) {
                width: 252px !important;
                height: 42px;
                background: rgba(225, 227, 230, 0.3);
                box-shadow: none;
                border-radius: 8px;
                border: none;
              }
          }
        }

        .create-button {
          margin-top: 16px;
          width: 100%;
          height: 60px;
          padding: 20px 26px;
          box-sizing: border-box;
          font-weight: bold;
          font-size: 14px;
          color: #2e2f33;
          display: flex;
          align-items: center;
          cursor: pointer;

          .arco-icon {
            font-size: 20px;
            color: #17171a;
            margin-right: 20px;
          }
          &:hover{
            background: rgba(217, 217, 219, 0.5);
            border-radius: 12px;
          }
        }

        .task-list-ul {
          overflow: overlay;
          height: calc(100% - 120px);

          .task-item {
            width: 100%;
            height: 92px;
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 24px 20px;
            box-sizing: border-box;
            margin-top: 16px;


            // &+.task-item {
            //   margin-top: 8px;
            // }

            .status-img {
              width: 40px;
              height: 40px;
            }

            .task-item-info {
              margin-left: 16px;

              .info-time {
                font-family: Komu A, Komu A;
                font-weight: 500;
                font-size: 18px;
                color: #2e2f33;
              }

              .info-status-img {
                height: 17px;
                margin-left: 4px;
              }

              .info-status {
                display: inline-block;
                padding: 3px 4px;
                //                 background: #E6842E;
                // box-shadow: inset 2px 2px 2px 1px rgba(126,9,11,0.5);
              }

              .key-words {
                margin-top: 8px;
                font-weight: 400;
                font-size: 14px;
                color: #606166;
                width: 240px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
        }
        .task-item{
          &:hover{
                      border-radius: 12px;
                      background: rgba(217, 217, 219, 0.5);
                    }
        }           
        .active-task-item {
          background: #E1E3E6 !important;
          border-radius: 12px;
        }
      }

      .task-content {
        flex: 1;
        padding: 26px 32px 32px 28px;
        position: relative;
        user-select: none;

        .icon-status {
          top: 32px;
          left: 18px;
        }

        .task-detail-time {
          font-family: Komu A, Komu A;
          font-weight: 500;
          font-size: 20px;
          color: #47484d;
          line-height: 20px;
        }

        .task-detail-info {
          display: flex;
          margin-top: 20px;
        }
      }
      .sigle-task-timepicker{
            display: flex;
            align-items: center;
            justify-content: center;
            background: #D9D9DB;
            border-radius: 4px;
            width: 90px;
            height: 36px;
            text-align: center;
            margin-top: 12px; 
            img{
          margin-right: 4px;
        }
            .detail-item-value {
        font-family: Komu A, Komu A;
        font-weight: 500;
        font-size: 14px;
        color: #47484d;
        white-space: nowrap;
        line-height: 18px;
        .unit {
          font-weight: bold;
          font-size: 10px;
          color: #abaeb3;
          margin-left: 4px;
        }

        .unit-CNY {
          height: 11px;
        }
      }   
            .detail-item-value-number {
                  font-size: 18px;
                  .end-time-long{
                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                    font-weight: bold;
                    font-size: 14px;
                  }
                }     
          }
      .icon-status-done-grey-fill {

        .detail-item-value {
          color: #ABAEB3 !important;
        }

        .process-content-title {
          color: #7B7C80 !important;
        }

        .keywords-item-text-downe {
          color: #C6C7CC !important;
        }

        .info-time {
          color: #ABAEB3 !important;
        }

        .key-words {
          color: #ABAEB3 !important;
        }
        .active-item-process{
          // background: rgba(217, 217, 219) !important;
        }
        :deep(.el-textarea){
          background: rgba(204, 204, 204, 0.3) !important;
            .el-textarea__inner{
              color: #CCC !important;
            }
          }
        .item-content-item{
          :deep(.item-time-picker ){
            border: none;
            padding: 0 8px 0 0;
            .arco-picker-suffix{
              opacity: 0.1;
            }
            .arco-picker-input{
              color: #CCCCCC !important;
            }
        }
        }
        .process-content-item-content{
          :deep(.el-textarea){
          background: #CCCCCC !important;
            .el-textarea__inner{
              color: #C6C7CC !important;
            }
          }
          .process-content-time{
            color: #C6C7CC;
          }
        }
      }
      .icon-status-done-grey-fill-click {
          .process-content-info{
            pointer-events: none;
          }
          .keywords-item-time{
            color: #ADAEB3 !important;
          }
          .complete-blue-color{
            color: #ADAEB3 !important;
          }
          .keywords-item-text-downe{
            background: rgba(204, 204, 204, 0.3) !important;
          }

      }
      }

    .task-detail-process {
      margin-top: 16px;
      display: flex;

      .process-icon {
        width: 52px;
        margin-top: 12px;

        .process-icon-img {
          &>img {
            width: 40px;
            height: 40px;
          }

          &+.process-icon-img {
            &::before {
              content: "...............";
              display: inline-block;
              height: 84px;
              width: 16px;
              color: #abaeb3;
              letter-spacing: 2px;
              transform: rotate(-90deg) translate(-26px, 40px);
            }
          }
        }
      }

      .process-triangle {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #FCFCFC;
        position: absolute;
        top: 150px;
        left: 81px;
        transform: rotate(90deg);
      }

      .process-content {
        margin-left: 16px;
        flex: 1;
        width: 0;
        height: 639px;
        background: #FCFCFC;
        border-radius: 8px 8px 8px 8px;
        position: relative;
        padding: 28px 32px;
        box-sizing: border-box;
        overflow: overlay;

        .process-content-title {
          font-weight: bold;
          font-size: 14px;
          color: #2E2F33;
          line-height: 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          img{
            width: 20px;
            height: 20px;
            opacity: 0.5;
          }
          .slider-icon-up{
            transform: rotate(180deg);
          }
          &:hover{
            position: relative;
            z-index: 1;
            &::after{
              content: "";
              height: 32px;
              width: calc(100% + 16px);
              background: #E1E3E6;
              border-radius: 8px;
              position: absolute;
              left: -8px;
              top: 0;
              z-index: -1;
            }
            img{
              opacity: 1;
            }
          }
        }
        .edit-color {
          color: #DB863C;
        }

        .time-picker-flex{
              display: flex;
              align-items: center;
            }
          .item-time-picker-process {
            border-radius: 4px;
            width: 90px;
            padding: 0;
            box-sizing: border-box;
            background: rgba(225, 227, 230, 0.3);
            &:hover{
              background: #E1E3E6;
            }
            :deep(.arco-picker-size-small input){
              font-size: 12px;
            }

            :deep(.item-time-picker) {
            height: 36px;
            width: 100%;
            border: none;
            padding: 0 8px 0 0;
            .el-input__icon {
              font-size: 16px;
              margin-right: 4px;
            }

            .el-input__wrapper {
              background: none;
              box-shadow: none;
              padding: 0;
              padding-left: 12px;

              .el-input__inner {
                font-family: Komu A, Komu A;
                font-weight: 500;
                font-size: 18px;
                color: #2e2f33;
                line-height: 18px;
              }
            }
          }
          }
          .item-time-picker-process-week {
            width: 144px;
          }
        .process-content-item-content {
          margin-top: 12px;
          display: flex;
          .item-choose-type{
            display: flex;
            align-items: center;
            padding: 10px 12px;
            cursor: pointer;
            color: #606166;
            border-radius: 4px;
            box-sizing: border-box;
            .content-item-icon {
            width: 16px;
            height: 16px;
            background: url("@/assets/images/mine/icon／keyword／single／grey@2x.png");
            background-size: cover;
            display: inline-block;
          }
          .content-item-icon-muiltiple{
            background: url("@/assets/images/mine/icon／keyword／multiple／grey@2x.png");
            background-size: cover;
          }
            &:hover{
              // border: 2px solid #4560E6;
              // box-shadow: 0 0 0 2px #4560E6 inset;
              background: rgba(69, 96, 230, 0.2);
              color: #4560E6;
              .content-item-icon {
            background: url("@/assets/images/mine/icon／keyword／single／blue@2x.png");
            background-size: cover;
          }
          .content-item-icon-muiltiple{
            background: url("@/assets/images/mine/icon／keyword／multiple／blue@2x.png");
            background-size: cover;
          }
            }
            &+.item-choose-type{
              margin-left: 20px;
            }
          }
          .active-item-choose-type{
            background: #4560E6;
            color: #FFFFFF;
            .content-item-icon {
            background: url("@/assets/images/mine/icon／keyword／single／white@2x.png");
            background-size: cover;
          }
          .content-item-icon-muiltiple{
            background: url("@/assets/images/mine/icon／keyword／multiple／white@2x.png");
            background-size: cover;
          }
          }

          .process-text {
            font-weight: bold;
            font-size: 14px;
            margin-left: 4px;
          }
          .active-item-process{
            .content-item-icon{
              opacity: 1;
            }
            .process-text{
              color: #2E2F33;
            }
          }

          .item-content-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            cursor: pointer;
            &:hover{
            background: rgba(217, 217, 219, 0.5);
            }
            &+.item-content-item {
              margin-left: 20px;
            }
          }

          .active-item-process {
            background: rgba(217, 217, 219);
            border-radius: 4px;
            .prefix-icon{
              width: 16px;
              height: 16px;
            }

          }
          .multiple-task-time{
            .active-item-process:hover{
              background: rgba(217, 217, 219, 0.5) !important;
            }
          }

          .item-time-picker-process {
            border-radius: 4px;
            width: 90px;
            padding: 0;
            box-sizing: border-box;
            background: rgba(225, 227, 230, 0.3);
            &:hover{
              background: #E1E3E6;
            }
            :deep(.arco-picker-size-small input){
              font-size: 12px;
            }
          }

          .item-time-picker-process-week {
            width: 144px;
          }

          :deep(.item-time-picker) {
            height: 36px;
            width: 100%;
            border: none;
            padding: 0 8px 0 0;
            .el-input__icon {
              font-size: 16px;
              margin-right: 4px;
            }

            .el-input__wrapper {
              background: none;
              box-shadow: none;
              padding: 0;
              padding-left: 12px;

              .el-input__inner {
                font-family: Komu A, Komu A;
                font-weight: 500;
                font-size: 18px;
                color: #2e2f33;
                line-height: 18px;
              }
            }
          }
        }


        .form-item-textarea {
          width: 521px;
          min-height: 60px;
          background: none;
          border-radius: 8px;
          padding: 12px;
          box-sizing: border-box;
          border: 1px solid rgba(46,47,51,0.1);
          &:hover{
            border: 1px solid #2E2F33;
          }
          &:focus{
            border: 1px solid #2E2F33 !important;
          }
          :deep(.el-textarea__inner) {
            background: none;
            height: 100%;
            box-shadow: none;
            padding: 0;
            color: #757780;
            font-weight: 400;
            font-size: 12px;

            &::-webkit-input-placeholder {
              /* WebKit browsers，webkit内核浏览器 */
              color: #757780;
            }
          }
        }
        .form-item-textarea-diabled{
          :deep(.el-textarea__inner) {
            &::-placeholder{
              /* WebKit browsers，webkit内核浏览器 */
              color: #ADAEB3;
            }
            &::-webkit-input-placeholder {
              /* WebKit browsers，webkit内核浏览器 */
              color: #ADAEB3;
            }
          }
        }

        .keywords-version {
          margin-top: 20px;
          // height: 450px;
          overflow: overlay;

          .keywords-item {
            &+.keywords-item {
              margin-top: 24px;
            }
          }

          .keywords-item-info {
            display: flex;
            align-items: flex-end;
          }

          .keywords-item-time {
            font-weight: 400;
            font-size: 12px;
            color: #2E2F33;
          }

          .keywords-item-text {
            width: 521px;
            background: rgba(204,204,204,0.3);
            border-radius: 8px;
            border: 1px solid #CCCCCC;
            font-weight: 400;
            font-size: 12px;
            color: #C6C7CC;
            line-height: 20px;
            padding: 12px;
            box-sizing: border-box;
            overflow: auto;
            word-wrap: break-word;

            .arco-icon {
              font-size: 14px;
              margin-right: 4px;
              transform: translateY(2px)
            }

          }

          .keywords-item-text-downe {
            font-weight: bold;
            font-size: 14px;
            background: rgba(69, 96, 230, 0.2);
            color: #4560E6;
            border: none;
          }
          .keywords-item-can-click{
            cursor: pointer;
            &:hover{
              .keywords-item-text-downe{
                background: #4560E6;
                color: #E9E9EB;
              }
              .process-content-time{
                color: #4560E6;
              }
            }
          }

          .process-content-time {
            color: #C6C7CC;
          }
          .complete-blue-color {
            color: #4560E6;
          }
        }

        .process-content-time {
          font-family: Komu A, Komu A;
          font-weight: 500;
          font-size: 14px;
          color: #abaeb3;
          margin-left: 8px;
        }

        .process-content-item {
          margin-top: 20px;

          .process-content-item-title {
            font-weight: 400;
            font-size: 12px;
            color: #2E2F33;
          }

          .multiple-task-time {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .item-content-item {
              margin: 0 !important;
            }
          }

          .delete-button {
            cursor: pointer;
            align-self: center;
            img {
              width: 24px;
              height: 24px;
            }
          }
        }
        .process-content-item-disabel{
          pointer-events: none;

        }

        .add-button {
          width: 90px;
          height: 36px;
          background: rgba(217, 217, 219, 0.5);
          border-radius: 4px;
          opacity: 0.5;
          text-align: center;
          line-height: 40px;
          margin-top: 8px;
          font-size: 16px;
          cursor: pointer;
          img {
              width: 16px;
              height: 16px;
            }
            &:hover{
              background: #d9d9db;
            }
        }

        .commit-button {
          margin-top: 20px;
          transform: translateX(-8px);
          .normal-button{
            width: 212px;
            height: 52px;
            background-size: auto 100%;
          cursor: pointer;
            background-image: url("@/assets/images/mine/button／confirmAndProceed／normal@2x.png");
            &:hover{
            background-image: url("@/assets/images/mine/button／confirmAndProceed／hover@2x.png");
            }
          }
          .forbidden-button{
            width: 212px;
            height: 52px;
            background-size: auto 100%;
            background-image: url("@/assets/images/mine/button／confirmAndProceed／forbid@2x.png");
          }
        }
        .commit-button-forbidden{
          margin-top: 20px;
          img{
            height: 52px;
            transform: translateX(-8px);
          }
        }
        .commit-button-willconfirm{
          margin-top: 20px;
          transform: translateX(-8px);
          width: 176px;
            height: 52px;
            background-size: 100% 100%;
            cursor: pointer;
            background-image: url("@/assets/images/mine/button／confirmManuscript／normal@2x.png");
            &:hover{
            background-image: url("@/assets/images/mine/button／confirmManuscript／hover@2x.png");
          }
        }
        .downLoad-commit-button{
          margin-top: 20px;
          transform: translateX(-8px);
          width: 186px;
            height: 52px;
            background-size: 100% 100%;
            cursor: pointer;
            background-image: url("@/assets/images/mine/button／downloadOne／normal@2x.png");
            &:hover{
            background-image: url("@/assets/images/mine/button／downloadOne／hover@2x.png");
          }
        }

        .notes-for-user {
          margin-top: 20px;
          font-weight: 400;
          font-size: 12px;
          color: #abaeb3;
          line-height: 24px;
        }
      }
    }
}
.icon-status {
      position: absolute;
      left: 18px;
      top: 29px;
      width: 4px;
      height: 7px;
      border-radius: 24px;
    }

    .icon-status-will-do {
      background: #e6842e;
      box-shadow: inset 2px 2px 2px 1px rgba(81, 30, 11, 0.5);
    }

    .icon-status-doing {
      background: #4560e6;
      box-shadow: inset 2px 2px 2px 1px rgba(13, 28, 161, 0.56);
    }

    .icon-status-done {
      background: #abaeb3;
      box-shadow: inset 2px 2px 2px 1px rgba(11, 24, 86, 0.26);
    }

    .icon-status-will-do-text {
      color: #e68837 !important;
    }

    .icon-status-doing-text {
      color: #4560e6 !important;
    }

    .icon-status-done-text {
      color: #abaeb3 !important;
    }
    .detail-item {
      position: relative;

      &:first-child {
        padding-right: 32px;
      }

      &+.detail-item {
        padding: 0 32px;

        &::before {
          content: "";
          width: 1px;
          height: 12px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background: rgba(0, 0, 0, 0.1);
        }
      }

      .detail-item-title {
        font-weight: 400;
        font-size: 12px;
        color: #adaeb3;
      }

      .info-status-img {
        height: 18px;
      }

      .detail-item-value {
        margin-top: 4px;
        font-family: Komu A, Komu A;
        font-weight: bold;
        // font-size: 14px;
        color: #47484d;
        white-space: nowrap;
        line-height: 18px;

        .unit {
          font-weight: bold;
          font-size: 10px;
          color: #abaeb3;
          margin-left: 4px;
        }

        .unit-CNY {
          height: 11px;
        }
      }

      .detail-item-value-number {
        font-size: 18px;
        font-weight: 500 !important;
        .end-time-long{
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: bold;
          font-size: 14px;
        }
      }
    }
</style>
<style lang="scss">
  .filter-popper-box{
  padding: 26px 16px;
  box-sizing: border-box;
  width: 300px;
  .popper-title{
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    .lef{
      .title{
        font-weight: bold;
        font-size: 16px;
        color: #2E2F33;
      }
      p{
        font-weight: 400;
        font-size: 12px;
        color: #7B7C80;
        margin-top: 4px;
      }
    }
    >img{
      width: 42px;
      height: 42px;
    }
  }
  .line{
    width: 100%;
    height: 1px;
    background: #E1E2E6;
    margin: 20px 0;
  }
  .filter-list{
    .filter-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      cursor: pointer;
      & + .filter-item{
        margin-top: 12px;
      }
      .filter-item-name{
        font-weight: bold;
font-size: 14px;
color: #2E2F33;
      }
      .filter-item-num{
        font-size: 12px;
        color: #7B7C80;
      }
    }
    .filter-item-active{
      background: #D9D9DB;
      border-radius: 4px;
    }
  }
  .filter-timer{
    .arco-picker-container{
      border: none !important;
    }
    .arco-picker-footer{
      display: none !important;
    }
  }
} 
</style>
